<template>
  <div id="activity-review">
    <h1>活动审核</h1>
    <el-table :data="activities" style="width: 100%">
      <el-table-column prop="id" label="活动ID"></el-table-column>
      <el-table-column prop="name" label="活动名称"></el-table-column>
      <el-table-column prop="time" label="活动时间"></el-table-column>
      <el-table-column prop="location" label="活动地点"></el-table-column>
      <el-table-column prop="description" label="活动描述"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="approveActivity(scope.row)">通过</el-button>
          <el-button @click="rejectActivity(scope.row)">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  getActivitiesForReview,
  approveActivity,
  rejectActivity,
} from '../api/api.js';
export default {
  name: 'activityreview',
  data() {
    return {
      activities: [] // 存储待审核的活动列表
    };
  },
  methods: {
    getActivities() {
      // 获取待审核的活动列表
      getActivitiesForReview()
        .then(response => {
          this.activities = response.data;
        })
        .catch(error => {
          console.error('获取活动列表失败：', error);
        });
    },
    approveActivity(activity) {
      // 处理通过审核的操作，更新数据库中的活动状态为已通过审核
      const idString = activity.id;
      approveActivity(idString)
        .then(response => {
          console.log('通过审核的活动：');
          this.getActivities();
        })
        .catch(error => {
          console.error('审核活动失败：', error);
        });
    },
    rejectActivity(activity) {
      // 处理拒绝审核的操作，更新数据库中的活动状态为已拒绝审核
      const idString = activity.id;
      rejectActivity(idString)
        .then(response => {
          console.log('拒绝审核的活动：');
          this.getActivities();
        })
        .catch(error => {
          console.error('审核活动失败：', error);
        });
    },
  },
  created() {
    this.getActivities();
  }
};
</script>

<style scoped>
#activity-review {
  width: 100%;
  padding: 20px;
}

h1 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

el-table {
  width: 100%;
  border-collapse: collapse;
}

el-table th,
el-table td {
  padding: 10px;
  text-align: left;
  border: 1px solid #ccc;
}

el-table th {
  background-color: #eee;
  font-weight: bold;
}

el-button {
  margin-right: 10px;
}
</style>